<template>
  <div class="banxin tanxin CD">
    <div class="CD_n">
      <div class="CD_top">
        <h3>
          <span>热门新碟</span>
        </h3>
      </div>
      <ul>
        <li v-for="(item, id) in NweCD" :key="id">
          <div>
            <img :src="item.picUrl" alt="" />
          </div>
          <p class="name">
            <a href="">{{ item.name }}</a>
          </p>
          <p class="singer">
            <span>
              <a href="">{{ item.artist.name }}</a>
            </span>
          </p>
        </li>
      </ul>
      <div class="cd_fenlei">
        <div class="fenlei_t">
          <h3>
            <span>全部新碟</span>
          </h3>
          <div class="cd_fenlei_tile">
            <a href="">全部</a>
            <span>|</span>
            <a href="">华语</a>
            <span>|</span>
            <a href="">欧美</a>
            <span>|</span>
            <a href="">韩国</a>
            <span>|</span>
            <a href="">日本</a>
          </div>
          <ul>
            <li v-for="(item, id) in AllNweCD" :key="id">
              <div>
                <img :src="item.picUrl" alt="" />
                <p class="name">
                  <a href="">{{ item.name }}</a>
                </p>
                <p class="singer">
                  <span>
                    <a href="">{{ item.artist.name }}</a>
                  </span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="fenye">
        <div class="fenye_t">
          <a href="" class="page" style="">上一页</a>
          <a
            href=""
            class="num"
            style="background-color: #ae090a; border: 1px solid #ae090a"
            >1</a
          >
          <a href="" class="num">2</a>
          <a href="" class="num">3</a>
          <a href="" class="num">4</a>
          <a href="" class="num">5</a>
          <a href="" class="num">6</a>
          <a href="" class="num">7</a>
          <a href="" class="num">8</a>
          <span>...</span>
          <a href="" class="num">19</a>
          <a href="" class="page">下一页</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetNewCD, GetAllNewCD } from "@/request/api";
export default {
  data() {
    return {
      NweCD: [],
      AllNweCD: [],
    };
  },
  created() {
    GetNewCD().then((res) => {
      this.NweCD = res.data.weekData;
    });
    GetAllNewCD().then((res) => {
      console.log(res.data.albums);
      this.AllNweCD = res.data.albums;
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.CD {
  width: 980px;
  min-height: 700px;
  height: 2141px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;

  .CD_n {
    padding: 40px;
    position: relative;
    zoom: 1;

    .CD_top {
      height: 40px;
      border-bottom: 2px solid #c20c0c;
      width: 900px;

      h3 {
        float: left;
        font-size: 24px;
        font-weight: normal;

        span {
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
          font-size: 24px;
          font-weight: normal;
        }
      }
    }

    ul {
      margin: 20px 0 0 -33px;
      width: 933px;
      height: 416px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;

      li {
        padding-left: 33px;
        width: 153px;
        height: 178px;
        float: left;
        display: inline-block;
        width: 140px;
        height: 188px;
        overflow: hidden;
        padding: 0 0 30px 46px;
        line-height: 1.4;

        div {
          width: 130px;
          height: 130px;
          position: relative;
          display: block;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .name {
          margin: 8px 0 3px;
          font-size: 14px;
          width: 100%;

          a {
            display: inline-block;
            max-width: 100%;
            vertical-align: middle;
            color: #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            text-decoration: none;
          }
        }

        .singer {
          width: 100%;

          span {
            display: inline-block;
            max-width: 85%;
            vertical-align: middle;

            a {
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-wrap: normal;
              color: #666;
              cursor: pointer;
              text-decoration: none;
            }
          }
        }
      }
    }

    .cd_fenlei {
      .fenlei_t {
        height: 40px;
        border-bottom: 2px solid #c20c0c;
        margin-top: 20px;

        h3 {
          float: left;
          font-size: 24px;
          font-weight: normal;

          span {
            font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
            font-size: 24px;
            font-weight: normal;
          }
        }

        .cd_fenlei_tile {
          float: left;
          margin: 12px 0 0 20px;
          margin-top: 3px;

          a {
            color: #666;
            cursor: pointer;
            text-decoration: none;
            font-size: 12px;
          }

          span {
            margin: 0 10px;
            color: #c7c7c7;
          }
        }

        ul {
          margin: 20px 0 0 -33px;
          width: 933px;
          height: 1500px;
          margin-left: -49px;
          margin-top: 15px;

          li {
            padding-left: 33px;
            width: 153px;
            height: 178px;
            float: left;
            padding: 40px 0 30px 46px;
            line-height: 1.4;
            display: inline-block;
            width: 140px;
            height: 188px;
            overflow: hidden;

            div {
              position: relative;
              display: block;
              width: 130px;
              height: 130px;

              img {
                display: block;
                width: 100%;
                height: 100%;
              }

              .name {
                width: 100%;
                margin: 8px 0 3px;
                font-size: 14px;

                a {
                  max-width: 100%;
                  display: inline-block;
                  word-wrap: normal;
                  cursor: pointer;
                  text-decoration: none;
                  vertical-align: middle;
                  color: #000;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }

              .singer {
                width: 100%;
                overflow: hidden;
                word-wrap: normal;
                text-overflow: ellipsis;
                white-space: nowrap;

                span {
                  vertical-align: middle;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: inline-block;
                  max-width: 85%;
                  white-space: nowrap;
                  word-wrap: normal;

                  a {
                    color: #666;
                    cursor: pointer;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-wrap: normal;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .fenye {
    text-align: center;
    margin: 20px 0;
    position: absolute;
    bottom: 0;
    left: 30%;

    .page {
      background: url(../assets/img/button.png) no-repeat 0 9999px;
      background-position: 0 -620px;
      color: #cacaca;
      cursor: default;
      width: 70px;
      font-size: 12px;
      line-height: 25px;
      height: 25px;
      display: inline-block;
      padding-left: 5px;
    }

    .num {
      background-position: 0 -650px;
      background: url(../assets/img/button.png) no-repeat 0 9999px;
      color: #cacaca;
      cursor: default;
      height: 22px;
      padding: 0 8px;
      background-color: #fff;
      line-height: 22px;
      margin: 0 1px 0 2px;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 2px;
      vertical-align: middle;
      font-size: 12px;
      color: #000;
      text-decoration: none;
    }
  }
}
</style>